/*
 * @Author: yangrongxin
 * @Date: 2021-09-15 13:51:01
 * @LastEditors: yangrongxin
 * @LastEditTime: 2022-01-18 17:34:36
 */

import { View, Text } from '@tarojs/components';
import { ScrollDataTable, Pie } from '@/components/index';
import styles from './index.module.less';

const TeamTestReportItem = (props: any) => {
  const {
    thirdTitle,
    Content,
    introTitle,
    chartTitle,
    // 表格扩展数据
    tableHeaderList = ['男', '女', '总数'],
    tableHeaderData = [
      {
        title: '人数',
        data: ['1', '15', '16'],
      },
      {
        title: '百分比',
        data: ['6.25%', '93.75%', '100%'],
      },
    ],
    // 扩展表格列合并的数据
    tableHeaderListClassTitle = '',
    tableHeaderListClass = [],
    // 图表扩展数据
    charDatas = [
      {
        charData: null,
        rightContent: null,
        maxCount: 100,
      },
    ],
  } = props;

  return (
    <View className={styles.TeamReportItemContainer}>
      <View className={styles.thirdLevelTitle}>{thirdTitle}</View>
      {/* 展示信息文本 */}
      {Content}
      {/* 展示表格对应介绍 */}
      <View className={styles.center}>{introTitle}</View>
      {/* 展示表格数据 */}
      <ScrollDataTable
        tableHeaderList={tableHeaderList}
        tableHeaderData={tableHeaderData}
        tableHeaderListClassTitle={tableHeaderListClassTitle}
        tableHeaderListClass={tableHeaderListClass}
      />
      {/* 展示对应的图标信息 */}
      <View className={styles.center}>{chartTitle}</View>
      {/* 展示信息对应的饼图 */}
      {charDatas.map((item: any, index: number) => {
        const { charData, rightContent, maxCount = 100 } = item;
        return (
          <View key={String(index)} className={styles.TeamReportItemCharItem}>
            {/* 移动端展示区域过小 所以rightContent 展示为bottomContent */}
            <Pie height={400} charData={charData} maxCount={maxCount} />
            {rightContent && <View className={styles.TeamReportItemCharItemTextContent}>{rightContent}</View>}
          </View>
        );
      })}
    </View>
  );
};

export default TeamTestReportItem;
